$(function () {
    load();
    $('#title').on('keydown', function (event) {
        if (event.keyCode === 13) {
            // alert('11');
            var local = getDate();
            local.push({ title: $(this).val(), done: false })
            // 把获取的数组 存储到本地
            // localStorage.setItem()
            saveDate(local);
            load();
        }
    })

    $('input').focus(function () {
        if ($('input').val() == '添加ToDo') {
            $(this).val('')
        }
        // 让input获得焦点
        // 如果有原内容 则将内容清空
    })
    $('input').blur(function () {
        if ($('input').val() == '') {
            $('input').val('添加ToDo')
        } else {
            
        }

    })

    // 删除按钮
    $('.uu,ol').on('click', 'a', function () {
        // alert('123')
        // 获取本地存储
        var date = getDate();
        // 修改数据
        var index = $(this).attr('id');
        date.splice(index, 1);
        // 保存到本地存储
        saveDate(date);
        // 重新渲染
        load();
    })

    // 完成和正在完成的切换按钮
    // 点击什么 什么就会变成完成
    // 就是 点击 获取索引号 将获得到的索引号的done改成checkbox的checked状态
    $('.uu,ol').on("click", "input", function () {
        // alert('1')
        var date = getDate();
        // 修改数据
        var index = $(this).siblings("a").attr('id')
        date[index].done = $(this).prop("checked");
        // 保存到本地存储
        saveDate(date);
        // 重新渲染本地
        load();
    })
    // 读取本地存储的数据
    function getDate() {
        var date = localStorage.getItem('todolist');
        if (date !== null) {
            //本地存储里的数据是字符串的 但是我们需要的是对象格式的
            return JSON.parse(date)
        } else {
            return [];
        }
    }
    // 保存到本地存储数据
    function saveDate(date) {
        localStorage.setItem('todolist', JSON.stringify(date))
    }

    // 将本地数据渲染加载到页面
    function load() {
        var date = getDate();
        // 先清空整个uu里面的 在进行添加 就可以实现 动态的更新
        $('.uu, ol').empty(); //清空uu ol里面的所有内容
        // 遍历这个数据 
        $.each(date, function (i, n) {
            if (n.done) {
                $('ol').prepend("<li><input type='checkbox' checked='checked'> " + n.title + " <a href='javascript:;' id=" + i + ">删除</a>")
            } else {
                $('.uu').prepend("<li><input type='checkbox'> " + n.title + " <a href='javascript:;' id=" + i + ">删除</a>")
            }
        })
    }

    // 将完成的内容写到已经完成的事件中
    function over() {
        var dete = getDate();
        $.each(date, function (i, n) {
            if (date.done !== false) {

            }
        })
    }
})